<template>
  <div>
     <div class="item flex" v-for="(item,index) in dataList" :key="item.key">
        <div :class="{'cricle':true,'first-c':index === 0,'second-c': index === 1, 'third-c': index === 2}">{{index+1}}</div>
        <div class="name">{{item.key}}</div>
        <div class="num">{{item.value}}</div>
     </div>
  </div>
</template>
<script>
export default {
  name: "rankItem",
  props: {
    dataList: {
      type: Array,
      default: ()=>[],
    },
  },
  data() {
    return {};
  },
  created() {},
  mounted() {},
  methods: {},
  computed: {},
};
</script>
<style lang="scss" scoped>
.item{
    margin-top: 16px;
    font-size: 14px;
    color: rgba(0,0,0,.65);
    .cricle{
        width: 20px;
        height: 20px;
        background: rgba(121, 121, 121, 0.65);
        color: #f5f5f5;
        border-radius: 10px;
        text-align: center;
        line-height: 20px;
    }
    .first-c{
      background: #f5222d;
      color: white;
    }
    .second-c{
      background: #FF8225;
      color: white;
    }
    .third-c{
      background: #f7e64e;
      color: white;
    }
    .name{
        width: 130px;
        // background: orange;
        text-align: center;
    }
    .num{
        width: 80px;
        // background: orchid;
        text-align: right;
    }
}
</style>